import React, { useEffect, useState } from 'react'
import { Scatter } from '@ant-design/charts'

const DemoBubble: React.FC = () => {
  const [data, setData] = useState([])
  useEffect(() => {
    asyncFetch()
  }, [])
  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/antfincdn/71YajFg3XZ/revenue.json')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => {
        console.log('fetch data failed', error)
      })
  }
  const config: any = {
    data,
    xField: 'Revenue per club[\u20AC m]',
    yField: 'UEFA points*',
    sizeField: 'UEFA points*',
    pointSize: [4, 25],
    colorField: 'revenueGroup',
    color: ['#72302f', '#beb298', '#d18768', '#e3cda1'],
    pointStyle: {
      stroke: '#777777',
      lineWidth: 1,
      opacity: 0.9
    },
    xAxis: {
      visible: true,
      min: -5,
      max: 230,
      nice: false
    },
    trendline: {
      visible: true,
      type: 'log'
    }
  }
  return <Scatter {...config} />
}

export default DemoBubble
